<template>
    <el-form :model="peradd" label-width="auto" style="max-width: 600px;margin-left: 200px;">
        <div>
            <H1 style="margin-left: 200px;">编辑用户</H1>
        </div>

        <el-form-item label="用户名称:">
            <el-input v-model="peradd.userName" />
        </el-form-item>
        <el-form-item label="用户密码">
            <el-input v-model="peradd.userPass" />
        </el-form-item>
        <el-form-item label="用户昵称">
            <el-input v-model="peradd.userNickname" />
        </el-form-item>
        <el-form-item label="角色:">
            <el-select v-model="peradd.roleId" placeholder="请选择角色">
                <el-option v-for="a in roledata" :label="a.roleName" :value="a.roleId" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button @click="bient">返回</el-button>
        </el-form-item>
    </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { Read, Write } from '@/Http/axios'
import { ElMessage } from "element-plus";
import { useCounterStore } from '@/stores/counter';
import router from '@/router'
import { useRoute } from 'vue-router';
const store = useCounterStore();
const route = useRoute();

const peradd = reactive({
    "userId": route.query.userId,
    "userName": "",
    "userPass": "",
    "userNickname": "",
    "roleId": 0,
    "states": true,
    "createdTime": "2025-09-14T13:11:25.312Z"
})
//用户添加方法
const onSubmit = () => {
    Write.post("/Management/UpdateUser", peradd).then(res => {
        if (res.data.code == 400) {
            ElMessage.success("修改成功")
            router.push('/UserShow')
        }
        else {
            ElMessage.error("修改失败")
        }
    }).catch(err => {
        console.log(err)
    })
}
//角色下拉框
const roledata = <any>ref([])
const rolelist = () => {
    // 调用 Read.get 方法，请求 /Management/GetRole 接口
    Read.get("/Management/GetRole").then(res => {
        // 将响应数据赋值给 roledata.value
        // res.data.data 是接口返回的数据
        roledata.value = res.data.data
    }).catch(err => {
        // 捕获请求异常，并在控制台输出错误信息
        console.log(err)
    })
}
//用户反填方法
const userinfo = () => {
    let userId = route.query.userId;
    Read.get("/Management/UserGet/", {
        params: {
            UserId: userId
        }
    }).then(res => {
        console.log(res.data);

        peradd.userName = res.data.data[0].userName
        peradd.userPass = res.data.data[0].userPass
        peradd.userNickname = res.data.data[0].userNickname
        peradd.roleId = res.data.data[0].roleId
    }).catch(err => {
        console.log(err)
    })
}

//钩子函数
onMounted(() => {
    rolelist();
    userinfo();
})
//返回
const bient = () => {
    router.push('/UserShow')
}


</script>
